<template>
  <div id="cars">
    <div class="search_box">
      <el-input
        placeholder="收款方"
        v-model="searchContent.collection"
      ></el-input>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-model="searchContent.time"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="printData">打印</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="650"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="create_time"
        label="时间"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
      </el-table-column>
      <el-table-column prop="payee" label="收款方" align="center">
      </el-table-column>
      <el-table-column prop="project" label="收款项" align="center">
      </el-table-column>
      <el-table-column prop="price" label="金额" align="center">
      </el-table-column>
    </el-table>
    <div class="page_table">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB } from "@/db/indexdb";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      tableData: [],
      searchContent: {
        collection: "",
        time: [],
      },
      pag: {
        total: 0,
        page: 1,
        size: 10,
      },
      printDataList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.printDataList = val;
    },
    printData() {
      let header = [
        { value: "create_time", label: "日期" },
        { value: "payee", label: "付款方" },
        { value: "project", label: "收款项" },
        { value: "price", label: "金额" },
        { value: "remark", label: "说明" },
      ];
      let msg = {
        msg1: "开支流水账",
      };
      printData(msg, this.printDataList, header);
    },
    reset() {
      this.searchContent = {
        collection: "",
        time: [],
      };
      this.getList();
    },
    getList() {
      openDB("car", "list").then(() => {
        // 1-出车记录表 2-车辆支出表 3-oa表 4-工资表
        let list1 = [];
        let list2 = [];
        let list3 = [];
        let list4 = [];
        // 1:开支 - 租车
        getDataByKey("list", "出车记录表").then((res) => {
          res.data.map((v) => {
            if (v.source == 2) {
              list1.push({
                type: "租车", //类型
                payee: v.company, // 收款方
                project: "车辆租赁", // 收款项
                price: v.cost || 0, //金额
                create_time: v.create_time, // 时间
              });
            }
          });
        });
        // 2:开支 - 车辆支出表
        getDataByKey("list", "车辆支出表").then((res) => {
          res.data.map((v) => {
            list2.push({
              type: "车辆支出", //类型
              payee: v.project, // 收款方
              project: v.project, // 收款项
              price: v.amount || 0, //金额
              create_time: v.create_time, // 时间
            });
          });
        });
        // 3:开支 - OA
        getDataByKey("list", "OA表").then((res) => {
          res.data.map((v) => {
            if (v.type_id == 1 || v.type_id == 2) {
              list3.push({
                type: "员工申请", //类型
                payee: v.employees, // 收款方
                project: v.project, // 收款项
                price: v.amount || 0, //金额
                create_time: v.time, // 时间
              });
            }
          });
        });
        // 4:开支 - 工资表
        getDataByKey("list", "工资表").then((res) => {
          res.data.map((v) => {
            list4.push({
              type: "员工工资", //类型
              payee: v.emp, // 收款方
              project: v.months + "工资", // 收款项
              price:
                "工资" +
                (v.paid_wages || 0) +
                ",社保缴纳" +
                (v.social_security_company || 0), //金额
              create_time: v.paid_date, // 时间
            });
          });
          // this.tableData = list1.concat(list2).concat(list3).concat(list4);
          let start = (this.pag.page - 1) * this.pag.size;
          let end = start + this.pag.size;
          let arr = list1.concat(list2).concat(list3).concat(list4);
          if (this.searchContent.collection != "") {
            arr = arr.filter((v) => {
              if (v.payee) {
                return v.payee.includes(this.searchContent.collection);
              }
            });
          }
          if (this.searchContent.time.length != 0) {
            let startDate = new Date(this.searchContent.time[0]);
            let endDate = new Date(this.searchContent.time[1]);
            arr = arr.filter((v) => {
              let startDate1 = new Date(v.create_time);
              return startDate1 >= startDate && startDate1 <= endDate;
            });
          }
          this.pag.total = arr.length;
          this.tableData = arr.slice(start, end);
        });
      });
    },
    handleSizeChange(val) {
      this.pag.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pag.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
